<script setup lang="ts">
import { ref } from 'vue'
import longworker from '@/static/images/long-worker.png'
import daylaborer from '@/static/images/day-laborer.png'
import { getProjectList, putLeftDelete } from '@/api/job-record'
import user from '@/composables/user'
import type { recordItemDto } from '@/api/job-record/type'

const projectList = ref([] as recordItemDto[])

async function onDisplay(projectId: number | string, type: number | string, recordId: string | number, isLeave: string | number) {
    console.log(projectId, type, recordId, isLeave)
    if (isLeave === 0) {
        await putLeftDelete({
            id: recordId,
            isShow: '1',
        })
        uni.navigateTo({
            url: `/package-clock/pages/clock-detail/clock-detail?projectId=${projectId}&type=${type}`,
        })
    }
    else {
        toast('您已离职')
        uni.showToast({
            title: '您已离职',
            icon: 'none',
        })
    }
}
onLoad(async () => {
    if (!user.userInfo.value.userId)
        return 0

    const list = await getProjectList({
        id: user.userInfo.value.userId,
    })
    console.log(list, 'fgsydyhugfd')
    projectList.value = list
})
</script>

<template>
    <NavbarContainer nav-title="工作记录">
        <view class="work-list">
            <view v-for="(item, i) in projectList" :key="i" class="work">
                <image class="work-icon" :src="item.type === 1 ? longworker : daylaborer" />
                <view class="work-msg">
                    <view class="work-title">{{ item.projectName }}</view>
                    <view class="work-describe">加入时间：{{ item.createTime }}</view>
                </view>
                <view v-if="item.type === 1" class="work-btn"
                      @click="onDisplay(item.projectId, item.type, item.recordId, item.isLeave)">
                    立即打卡
                </view>
            </view>
            <view v-if="!projectList.length" class="box-border w-full pt-350rpx text-center">暂无数据</view>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.container {
    background: #FAFAFC;
    min-height: 100vh;
    padding-bottom: 30rpx;
}

.work-list {
    position: relative;
    overflow: hidden;
    z-index: 5;
    border-radius: 26rpx;
    margin-top: 40rpx;
}

.work {
    width: 690rpx;
    background: #FFFFFF;
    border-radius: 26px 26px 0px 0px;
    display: flex;
    align-items: center;
    margin: 20rpx auto;
    box-sizing: border-box;
    padding: 30rpx 30rpx;
    border-radius: 16rpx;
}

.work-icon {
    width: 82rpx;
    height: 82rpx;
    margin-right: 30rpx;
}

.work-title {
    color: #1E2038;
    font-size: 32rpx;
    font-weight: bold;
    width: 400rpx;
}

.work-describe {
    color: #9497B1;
    font-size: 24rpx;
    margin-top: 10rpx;
}

.work-btn {
    width: 110rpx;
    height: 50rpx;
    font-size: 19rpx;
    border: 1rpx solid #cccccc;
    border-radius: 10rpx;
    line-height: 50rpx;
    text-align: center;
}
</style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "工作记录"
    }
}
</route>
